<template>
  <div class="integralPage">
    <div class="partA">
      <img class="partA-img" :src="options.homeBg" alt="" />
      <div class="partA1">
        <div class="partA2" @click="ruleBtn" v-if="userinfo.rule">规则</div>
        <div class="partA2" @click="telBtn" v-if="userinfo.phone">客服</div>
      </div>
    </div>
    <div class="partB">
      <div class="partBB">
        <div class="partB1">
          <span>我的积分：{{ pointBal }}</span>
          <!-- <span class="partB3">兑换记录</span> -->
        </div>
        <p class="partB2">您可在微信“我-卡包-券和礼品卡”中查看立减金兑换记录</p>
        <div class="partB4">
          <img class="partB4-img" :src="options.titleBg" alt="" />
          <div class="partB5">
            <div class="partB6" v-for="(item, index) in goldList" :key="index" @click="cashItemBtn(item)">
              <div class="partB6-img">
                <img class="partB6-img1" :src="options.awardBg" alt="" />
                <p class="partB6-img2">{{ item.sysStock.exchangeInteger }}积分</p>
              </div>
              <div class="partB6-item">
                <p class="partB6-item1">{{ item.name }}</p>
                <div class="partB6-item2">
                  <p>{{ item.available_begin_time }}</p>
                  <p>{{ item.available_end_time }}</p>
                </div>
                <p class="partB6-item3">满{{ item.coupon_amount_max }}元可减{{ item.coupon_amount_min }}元</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="payContent"></div>
    <popMsg ref="popMsg" @alertOff="alertOff"></popMsg>
  </div>
</template>

<script>
import popMsg from '../../component/dialog/index1.vue'
import $utils from '../../utils'

export default {
  props: {
    demo: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      goldList: [],
      ddForm: sessionStorage.ddForm ? JSON.parse(sessionStorage.ddForm) : {},
      inputDoor: 0,
      loading1: false,
      door1: false,
      msgCodeTxt: '获取验证码',
      getMsgDoor: false,
      options: {
        homeBg: '',
        titleBg: '',
        awardBg: '',
      },
      pointBal: 0,
    }
  },
  components: {
    popMsg,
  },
  mounted() {
    if (this.demo === '1') {
      this.activity()
      this.pointBal = $utils.urlQuery('pointBal') || window.localStorage.pointBal || 0
    }
  },
  computed: {
    userinfo() {
      return this.$store.state.app.userinfo
    },
  },
  methods: {
    cashItemBtn(item) {
      // uni.navigateTo({
      //   url: '/pages/backResult/index',
      // })
      // this.popUpMsg(6, '0元立减金')
      let custId = $utils.urlQuery('custId') || window.localStorage.custId //custId的值
      if (custId == 1) {
        return
      }
      if (this.door1) return
      this.door1 = true
      this.$api.publicMobile
        .activity_addOrder({
          awardId: item.awardId, //立减金awardId
          bankUserId: custId,
          activityId: $utils.urlQuery('activityId') || window.localStorage.activityId, //活动id
          openId: localStorage.user, //用户openId
        })
        .then((res) => {
          // document.getElementById('payContent').innerHTML = res.data
          // document.forms[0].submit()
          window.location.href = res.data
          setTimeout(() => {
            this.door1 = false
          }, 500)
        })
        .catch((err) => {
          this.door1 = false
          this.popUpMsg(3, err.msg || '服务异常!')
        })
    },
    ruleBtn() {
      this.popUpMsg(1, this.userinfo.rule)
    },
    telBtn() {
      window.location.href = 'tel:' + this.userinfo.phone
    },
    popUpMsg(i, j) {
      this.$refs.popMsg.popUpMsg(i, j)
    },
    alertOff(i) {
      if (i === 6) {
        this.$parent.pageSwichBtn(1)
      }
    },
    activity_getAward(id) {
      this.$api.publicMobile.activity_getAward(null, '/' + id).then((res) => {
        this.goldList = res.data
        this.goldList = this.goldList.map((v1) => {
          try {
            v1.sysStock.remark = JSON.parse(v1.sysStock.remark)
            v1.coupon_amount_min = (v1.sysStock.remark.stock_use_rule.fixed_normal_coupon.coupon_amount / 100).toFixed(2)
            v1.coupon_amount_max = (v1.sysStock.remark.stock_use_rule.fixed_normal_coupon.transaction_minimum / 100).toFixed(2)

            v1.available_begin_time = this.$moment(v1.sysStock.remark.available_begin_time)
            v1.available_end_time = this.$moment(v1.sysStock.remark.available_end_time)
          } catch (error) {}
          return v1
        })
      })
    },
    activity() {
      let id = $utils.urlQuery('activityId') || window.localStorage.activityId
      this.$api.publicMobile
        .activity(null, '/' + id)
        .then((res) => {
          this.activity_getAward(id)
          let res1 = res.data
          if (!res1) {
            this.$parent.pageLoad(true, '活动不存在')
            return
          }
          try {
            if (res1.rule) {
              res1.rule = JSON.parse(res1.rule).join('\n')
            }
          } catch (error) {}
          this.$store.dispatch('app/on_userinfo', res1)
          if (res1.name) {
            document.title = res1.name
          }
          if (res1.subjectColor && res1.subjectColor.match(/(#|rgb)/g)) {
            document.documentElement.style.setProperty('--main-color', res1.subjectColor)
          }
          if (res1.awardColor && res1.awardColor.match(/(#|rgb)/g)) {
            document.documentElement.style.setProperty('--main-bg', res1.awardColor)
          }

          this.options = {
            homeBg: res1.activityBackground || require('./img/banner.png'),
            titleBg: res1.awardBanner || require('./img/a2.png'),
            awardBg: res1.awardStyle || require('./img/a1.png'),
          }

          if (res1.isDelete == 1) {
            this.$parent.pageLoad(true, '活动不存在')
          } else {
            // status 1：未开始，2：进行中,3：已结束
            // isOnShelf 0为下架，1为上架
            if (res1.status == 1) {
              this.popUpMsg(4, {
                text: '不在活动时间范围内，请稍后再试',
              })
            } else if (res1.status == 2) {
              if (res1.isOnShelf == 0) {
                this.popUpMsg(4, {
                  text: '活动暂未开始，请稍后再试',
                })
              }
            } else if (res1.status == 3) {
              this.popUpMsg(4, {
                text: '活动已结束，下次赶早哦',
              })
            }
          }
        })
        .catch(() => {
          this.$parent.pageLoad(true, '活动不存在')
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.integralPage {
  position: relative;
  .partA {
    width: 100%;
    .partA-img {
      width: 100%;
    }
    .partA1 {
      position: absolute;
      top: 430rpx;
      right: 0;
      z-index: 10;
      .partA2 {
        font-size: 24rpx;
        width: 120rpx;
        height: 50rpx;
        line-height: 50rpx;
        background: var(--main-color);
        color: #fff;
        text-align: center;
        border-radius: 16rpx 0 0 16rpx;
        border: 6rpx solid rgba(255, 255, 255, 0.5);
        border-right: 0;
        margin-bottom: 16rpx;
      }
    }
  }
  .partB {
    background: var(--main-color);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 662rpx;
    padding-bottom: 98rpx;
    .partBB {
      padding: 0 30rpx 30rpx;
    }
    .partB1 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: #fff;
      font-size: 34rpx;
      line-height: 34rpx;
    }
    .partB3 {
      text-decoration: underline;
    }
    .partB2 {
      margin-top: 20rpx;
      font-size: 24rpx;
      line-height: 24rpx;
      color: #fff;
      opacity: 0.5;
    }
    .partB4 {
      background: var(--main-bg);
      margin-top: 30rpx;
      border-radius: 14rpx;
      padding: 30rpx;
      .partB4-img {
        display: block;
        max-width: 484rpx;
        max-height: 60rpx;
        padding-top: 10rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;
      }
    }
    .partB6 {
      background: var(--main-color);
      padding: 24rpx 34rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      border-radius: 8rpx;
      .partB6-img {
        width: 245rpx;
        height: 152rpx;
        position: relative;
        .partB6-img1 {
          width: 100%;
          height: 100%;
        }
        .partB6-img2 {
          position: absolute;
          top: 50%;
          left: 40rpx;
          width: 190rpx;
          text-align: center;
          transform: translateY(-50%);
          font-size: 30rpx;
          color: #b32a1c;
          line-height: 42rpx;
        }
      }
      .partB6-item {
        flex: 1;
        overflow: hidden;
        font-size: 24rpx;
        line-height: 33rpx;
        color: #fff;
        padding-left: 18rpx;
        .partB6-item1 {
          font-size: 30rpx;
          line-height: 42rpx;
          font-weight: bold;
          margin-bottom: 14rpx;
        }
        .partB6-item2 {
          margin-bottom: 6rpx;
        }
        .partB6-item3 {
          opacity: 0.5;
        }
      }
    }
  }
}
</style>
